'use strict';
import React from 'react';
import {
    View,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        borderBottomColor: '#F2F3F5',
        borderBottomWidth: 1,
        padding: 10,
        alignItems: 'center'
    },
    image: {
        width: 80,
        height: 80,
        marginRight: 5,
    },
    contentText: {
        flex: 1,
        height: 80,
        justifyContent: 'space-between',
    }
});

/**
 * 商品Item
 */
class RenderShopItem extends React.Component {

    render() {
        let {
            id,
            images,
            title,
            price,
            onItemPress,
            activeOpacity
        } = this.props;
        return (
            <TouchableOpacity activeOpacity={activeOpacity} onPress={() => onItemPress(id)}>
                <View style={styles.container}>
                    <Image
                        style={styles.image}
                        source={{uri:images}}/>
                    <View style={styles.contentText}>
                        <Text
                            numberOfLines={1}
                            style={{
                                marginTop: 5,
                                fontSize: 14,
                                color: 'black'
                            }}>{title}</Text>
                        <Text
                            style={{
                                fontSize: 14,
                                color: 'red',
                                marginBottom: 5
                            }}
                        >{'￥' + price}</Text>
                    </View>
                    {
                        activeOpacity ? null :
                            <Image style={{
                                width: 20,
                                height: 20,
                                marginLeft: 10,
                            }} source={require('../../Image/arrow.png')}/>
                    }

                </View>
            </TouchableOpacity>
        )
    }
}

export default RenderShopItem;